<template>
    <!-- 列表2 -->
  <view class='list2'>
    <view v-for='(item,index) in list' :key='index'>
      <view class='item1' v-if='item.siteType != "weibo"' 
        @tap='openArticleDet(0,item)'
        @longpress="longPress" 
        @touchstart='touchStart' 
        @touchmove='touchMove'>
        <view class='title' v-html='item.title'></view>
        <view class='article_info'>
          <view><text class='author' v-show='item.author'>{{item.author}}</text></view>
          <view>{{time(item.publishOn,"MM-DD hh:mm")}}</view>
          <view>
            <text v-if='item.level'>【{{item.level}}】</text>
            <text v-if='item.groupName'>【{{item.groupName}}】</text>
          </view>
        </view>
        <view class='content' v-html='item.summary'></view>
      </view>

      <view class='item2' v-if='item.siteType == "weibo"' 
        @tap='openArticleDet(1,item)'
        @longpress="longPress"
        @touchstart.capture='touchStart' 
        @touchmove.capture='touchMove'>
        <view class='user_info'>
          <view class='img_item' @tap.stop='userArticleList(item.author)' v-if='item.headimgUrl'>
            <image :src='item.headimgUrl'></image>
          </view>
          <view class='user'>
            <view class='name'>{{item.author}}</view>
            <view>
                {{time(item.publishOn,"hh:mm")}} 来自<text class='author'>{{item.siteName}}</text>
              <text>
                <text v-if='item.level'>【{{item.level}}】</text>
                <text v-if='item.groupName'>【{{item.groupName}}】</text>
              </text>
            </view>
          </view>
        </view>
        <view class='content'>
          <view class='text_content' :class='{text_hodden:index != show_index}'>
            <text></text>
            <text v-if='item.summary' v-html='item.summary'><text class='stern'>.</text></text>
            <text v-if='item.content' v-html='item.content'><text class='stern'>.</text></text>
            <view @tap.stop='showArticle(index)'>{{index != show_index?"展开":"收起"}}全文</view>
          </view>
          <view class='img_list' v-if='item.picUrls'>
            <view v-for='(img,img_index) in item.picUrls.slice(0,item.img_num)' :key='img_index'>
              <image :src='img' mode='widthFix'></image>
            </view>
          </view>
          <view class='operate_info'>
            <view hover-class='btn_hover2' @tap.stop='jumpDet(1,0,item)'>转发({{item.repostCount}})</view>
            <text>|</text>
            <view hover-class='btn_hover2' @tap.stop='jumpDet(1,1,item)'>评论({{item.replyCount}})</view> 
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

  export default {
    props: {
      list: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        time: this.$time,
        longPress_status: true,
        touchStart_x: 0,
        touchStart_y: 0,
        show_index: -1,
      }
    },
    methods: {
      // 打开用户文章列表
      userArticleList(name) {
        let url = '/pages/index/components/articleList?title='+name
        uni.navigateTo({url});

      },
      // 打开文章详情
      openArticleDet(article_type,item) {
        this.jumpDet(article_type,-1,item)
      },
      // 点击展开全文
      showArticle(index) {
        if(index == this.show_index) {
          this.show_index = -1;
          this.list[index].img_num = 3;
        }else {
          this.show_index = index;
          if(this.list[index].picUrls) {
            this.list[index].img_num = this.list[index].picUrls.length
          }
        }
        this.$emit("change")
      },
      // 点击转发、评论按钮
      jumpDet(article_type,open_type,item) {
        this.$store.state.article_det = item;
        let url = '/pages/index/components/articleDet?article_type='+article_type+'&open_type='+open_type
        uni.navigateTo({url});
      },
      // 长按
      longPress() {
        if(this.longPress_status) {
          this.$store.state.extend_show = true;
          this.$store.state.article_data = {data:'这是文章详情的数据'};
        }  
      },
      // 按下
      touchStart(e) {
        this.longPress_status = true;
        this.touchStart_x = e.changedTouches[0].pageX;
        this.touchStart_y = e.changedTouches[0].pageY;
      },
      // 移动
      touchMove(e) {
        let x = e.changedTouches[0].pageX - this.touchStart_x;
        let y = e.changedTouches[0].pageY - this.touchStart_y;
        if(Math.abs(x) > 10 || Math.abs(y) > 10) {
          this.longPress_status = false
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
.list2 {
  width: 100%;
  padding: 20upx;
  box-sizing: border-box;
  .item1,.item2 {
    width: 100%;
    background: #fff;
    padding: 27upx 23upx;
    box-sizing: border-box;
    border-radius: 12upx;
    margin-bottom: 18upx;
  }
  .item1 {
    .title {
      font-size: 34upx;
      color: #222;
      font-weight: 600;
      word-break:break-all;
    }
    .article_info {
      height: 50upx;
      display: flex;
      align-items: center;
      >view {
        font-size: 24upx;
        color: #999;
        margin-right: 15upx;
        white-space: nowrap;
        .author {
          color: #0084FF;
          padding: 0 15upx;
          box-sizing: border-box;
        }
      }
      .lable {
        >text {
          font-size: 20upx;
        }
      }
    }
    .content {
      font-size:28upx;
      color: #666;
      line-height: 50upx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;    
      overflow: hidden;
    }
  }
  .item2 {
    width: 100%;
    .user_info {
      width: 100%;
      height: 80upx;
      display: flex;
      align-items: center;
      .img_item {
        width: 70upx;
        height: 70upx;
        border-radius: 100%;
        overflow: hidden;
        margin-right: 20upx;
        >image {
          width: 100%;
          height: 100%;
        }
      }
      .user {
        height: 100%;
        font-size: 24upx;
        color: #999;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .name {
          font-size: 34upx;
          color: #333;
          font-weight: 600;
        }
        >view {
          .author {
            color: #0084FF;
            margin-left: 10upx;
          }
        }
      }
    }
    .content {
      font-size: 28upx;
      color: #666;
      margin-top: 10upx;
      .text_content {
        position: relative;
        >text {
          line-height: 40upx;
          &:nth-child(1) {
            color: #0084FF;
            margin-right: 10upx;
          }
        .stern {
            width: 160upx;
            display: inline-block;
            background: rgba(0,0,0,0);
            opacity: 0;
          }
        }
        >view {
          width: 160upx;
          position: absolute;
          right: 0;
          bottom: 2upx;
          color: #0084FF;
          background: #fff;
          text-align: center;
        }
      }
      .text_hodden {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;      
        overflow: hidden;
      }
      .img_list {
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 22upx 0;
        >view {
          width: 200upx;
          height: 200upx;
          border-radius:6upx;
          overflow: hidden;
          border: 1px solid #f9f9f9;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20upx;
          &:nth-child(3n) {
            margin: 0;
          }
          >image {
            width: 100%;
          }
        }
      }
      .operate_info {
        display: flex;
        align-items: center;
        >text {
          margin: 0 20upx;
        }
      }
    }
  }

}
</style>